<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">消缺任务管理</el-breadcrumb-item>
            <el-breadcrumb-item>消缺任务执行与回执</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <!--搜索区-->
            <el-form>
                <el-form ref="form">
                    <el-row :gutter="10">
                        <div>
                            <el-col :span="2" class="task">任务编号:</el-col>
                            <el-col :span="4">
                                <el-input></el-input>
                            </el-col>
                        </div>
                        <div>
                            <el-col :span="2" class="task">下发人:</el-col>
                            <el-col :span="4">
                                <el-input></el-input>
                            </el-col>
                        </div>
                        <div>
                            <el-col :span="2" class="task">工作单据:</el-col>
                            <el-col :span="4">
                                <el-select v-model="value" placeholder="请选择">
                                    <el-option
                                            v-for="item in optionssss"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>
                        </div>
                    </el-row>

                    <el-row :gutter="10">
                    </el-row>

                    <el-row :gutter="10" class="time_row">
                        <div>
                            <el-col :span="2" class="task">下发时间</el-col>
                        </div>
                        <div>
                            <el-form-item>
                                <el-col :span="4">
                                    <el-date-picker type="date" placeholder="选择日期"
                                                    style="width: 100%;"></el-date-picker>
                                </el-col>
                                <el-col class="line" :span="1">to</el-col>
                                <el-col :span="4">
                                    <el-date-picker type="date" placeholder="选择日期"
                                                    style="width: 100%;"></el-date-picker>
                                </el-col>
                                <el-col :span="4" class="button">
                                    <el-button type="primary" size="medium" icon="el-icon-search">查询</el-button>
                                </el-col>
                            </el-form-item>
                        </div>
                    </el-row>
                </el-form>
            </el-form>

            <!--主体区-->
            <el-table :data="eliminate" border stripe>
                <el-table-column label="任务编号" prop="task_number"></el-table-column>
                <el-table-column label="任务名称" prop="task_name" width="135px"></el-table-column>
                <el-table-column label="工作单据" prop="work_bills" width="100px"></el-table-column>
                <el-table-column label="下发人" prop="issue_person" width="110px"></el-table-column>
                <el-table-column label="下发时间" prop="issue_time" width="110px"></el-table-column>
                <el-table-column label="任务状态" prop="task_state" width="90px"></el-table-column>
                <el-table-column label="任务完成时间" prop="task_complete_time" width="100px"></el-table-column>
                <el-table-column label="操作" width="345px">
                    <template>
                        <!-- 查看按钮 -->
                        <el-button type="primary" icon="el-icon-view" size="mini" @click="lookVisible = true">查看
                        </el-button>

                        <!-- 回执录入按钮 -->
                        <el-button type="primary" icon="el-icon-s-promotion" size="mini"
                                   @click="enteringVisible = true">录入
                        </el-button>

                        <!-- 修改按钮 -->
                        <el-button type="warning" icon="el-icon-edit" size="mini" @click="amendVisible = true">修改
                        </el-button>

                        <!-- 取消按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini">取消</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页区-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
        </el-card>

        <!--查看对话框-->
        <el-dialog
                title="制定巡检任务"
                :visible.sync="lookVisible"
                width="50%">
            <!--内容主体区-->
            <el-form :model="lookForm" :rules="lookFormRules" ref="lookFormRef" label-width="70px">
                <el-form-item label="任务编码:" prop="task_id" label-width="100px">
                    <el-input v-model="lookForm.task_id" disabled></el-input>
                </el-form-item>

                <el-form-item label="任务名称:" prop="task_name" label-width="100px">
                    <el-input v-model="lookForm.task_name" disabled></el-input>
                </el-form-item>

                <el-form-item label="巡检线路:" prop="Inspection_line" label-width="100px">
                    <el-input v-model="lookForm.Inspection_line" disabled></el-input>
                </el-form-item>

                <el-form-item label="起始杆号:" prop="start_num" label-width="100px">
                    <el-input v-model="lookForm.start_num" disabled></el-input>
                </el-form-item>

                <el-form-item label="终止杆号:" prop="termination_num" label-width="100px">
                    <el-input v-model="lookForm.termination_num" disabled></el-input>
                </el-form-item>

                <el-form-item label="下发人:" prop="Issued_person" label-width="100px">
                    <el-input v-model="lookForm.Issued_person" disabled></el-input>
                </el-form-item>

                <el-form-item label="下发时间:" prop="Issued_time" label-width="100px">
                    <el-input v-model="lookForm.Issued_time" disabled></el-input>
                </el-form-item>

                <el-form-item label="任务状态:" prop="task_state" label-width="100px">
                    <el-input v-model="lookForm.task_state" disabled></el-input>
                </el-form-item>
            </el-form>
            <!--内容底部区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="lookVisible = false">取 消</el-button>
                <el-button type="primary" @click="lookVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!--修改对话框-->
        <el-dialog
                title="制定巡检任务"
                :visible.sync="amendVisible"
                width="50%">
            <!--内容主体区-->
            <el-form :model="amendForm" :rules="amendFormRules" ref="amendFormRef" label-width="70px">
                <el-form-item label="任务编码:" prop="task_id" label-width="100px">
                    <el-input v-model="amendForm.task_id" disabled></el-input>
                </el-form-item>

                <el-form-item label="任务名称:" prop="task_name" label-width="100px">
                    <el-input v-model="amendForm.task_name"></el-input>
                </el-form-item>

                <el-form-item label="巡检线路:" prop="Inspection_line" label-width="100px">
                    <el-input v-model="amendForm.Inspection_line"></el-input>
                </el-form-item>

                <el-form-item label="起始杆号:" prop="start_num" label-width="100px">
                    <el-input v-model="amendForm.start_num"></el-input>
                </el-form-item>

                <el-form-item label="终止杆号:" prop="termination_num" label-width="100px">
                    <el-input v-model="amendForm.termination_num"></el-input>
                </el-form-item>

                <el-form-item label="下发人:" prop="Issued_person" label-width="100px">
                    <el-input v-model="amendForm.Issued_person"></el-input>
                </el-form-item>

                <el-form-item label="下发时间:" prop="Issued_time" label-width="100px">
                    <el-input v-model="amendForm.Issued_time"></el-input>
                </el-form-item>

                <el-form-item label="任务状态:" prop="task_state" label-width="100px">
                    <el-input v-model="amendForm.task_state"></el-input>
                </el-form-item>
            </el-form>
            <!--内容底部区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="amendVisible = false">取 消</el-button>
                <el-button type="primary" @click="amendVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!--回执录入-->
        <el-dialog
                title="巡检任务回执录入"
                :visible.sync="enteringVisible"
                width="50%">
            <!--内容主体区-->
            <el-form :model="enteringForm" :rules="enteringFormRules" ref="enteringFormRef" label-width="70px">
                <el-form-item label="线路编号:" prop="path_id" label-width="100px">
                    <el-input></el-input>
                </el-form-item>

                <el-form-item label="杆塔编号:" prop="tower_id" label-width="100px">
                    <el-input></el-input>
                </el-form-item>

                <el-form-item label="缺陷类型:" prop="flaw_type" label-width="100px">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                                v-for="item in options1"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="缺陷级别:" prop="flaw_class" label-width="100px">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="完好率:" prop="intact" label-width="100px">
                    <el-input></el-input>
                </el-form-item>

                <el-form-item label="发现时间:" prop="discover_time" label-width="100px">
                    <el-input  disabled></el-input>
                </el-form-item>

                <el-form-item label="发现人员:" prop="discover_person" label-width="100px">
                    <el-input></el-input>
                </el-form-item>

                <el-form-item label="缺陷描述:" prop="flaw_describe" label-width="100px">
                    <el-input type="textarea" :rows="3"></el-input>
                </el-form-item>

            </el-form>
            <!--内容底部区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="enteringVisible = false">取 消</el-button>
                <el-button type="primary" @click="enteringVisible = false">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                /*获取用户列表的参数对象, 分页*/
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 2
                },
                total: 0,

                /*多选框*/
                optionssss: [{
                    value: '1',
                    label: '任务单'
                }, {
                    value: '2',
                    label: '第一种单据'
                }, {
                    value: '3',
                    label: '第二种单据'
                }],
                value: '',

                eliminate: [],

                /*控制 查看 的对话框*/
                lookVisible: false,
                /*查看 的表单数据*/
                lookForm: {
                    task_id: "RW0245",
                    task_name: "西渭一线任务巡检",
                    Inspection_line: "西渭一线",
                    start_num: "XW00001",
                    termination_num: "XW00256",
                    Issued_person: "线路管理员用户01",
                    Issued_time: "2013/12/12",
                    task_state: "已完成",
                    task_time: "2013/12/12"
                },

                /*控制 修改 的对话框*/
                amendVisible: false,

                /*修改 的表单数据*/
                amendForm: {
                    task_id: "RW0245",
                    task_name: "西渭一线任务巡检",
                    Inspection_line: "西渭一线",
                    start_num: "XW00001",
                    termination_num: "XW00256",
                    Issued_person: "线路管理员用户01",
                    Issued_time: "2013/12/12",
                    task_state: "已完成",
                    task_time: "2013/12/12"
                },

                /*回执录入*/
                options1: [{
                    value: '1',
                    label: '叉梁断裂'
                }, {
                    value: '2',
                    label: '杆塔倾斜'
                }, {
                    value: '3',
                    label: '吊柜变形'
                }, {
                    value: '4',
                    label: '其他'
                }],

                /*回执录入*/
                options2: [{
                    value: '1',
                    label: '一般'
                }, {
                    value: '2',
                    label: '严重'
                }, {
                    value: '3',
                    label: '紧急'
                }],


                /*控制 回执录入 的对话框*/
                enteringVisible: false,
                /*修改 的表单数据*/
                enteringForm: {
                    task_id: "RW0245",
                    task_name: "西渭一线任务巡检",
                    Inspection_line: "西渭一线",
                    start_num: "XW00001",
                    termination_num: "XW00256",
                    Issued_person: "线路管理员用户01",
                    Issued_time: "2013/12/12",
                    task_state: "已完成",
                    task_time: "2013/12/12"
                },

                /*修改验证*/
                amendFormRules:{
                    task_id: [
                        {required: true, message: '请输入任务编码', trigger: 'blur'}
                    ],
                    task_name: [
                        {required: true, message: '请输入任务名称', trigger: 'blur'}
                    ],
                    Inspection_line: [
                        {required: true, message: '请输入巡检路线', trigger: 'blur'}
                    ],
                    start_num: [
                        {required: true, message: '请输入起始杆号', trigger: 'blur'}
                    ],
                    termination_num: [
                        {required: true, message: '请输入终止杆号', trigger: 'blur'}
                    ],
                    Issued_person: [
                        {required: true, message: '请输入发布人', trigger: 'blur'}
                    ],
                    Issued_time: [
                        {required: true, message: '请输入发布时间', trigger: 'blur'}
                    ],
                    process: [
                        {required: true, message: '请输入巡检人', trigger: 'blur'}
                    ],
                    task_state: [
                        {required: true, message: '请输入任务状态', trigger: 'blur'}
                    ]
                },
                /*回执验证*/
                enteringFormRules:{
                    path_id: [
                        {required: true, message: '请输入路线编码', trigger: 'blur'}
                    ],
                    tower_id: [
                        {required: true, message: '请输入杆塔编号', trigger: 'blur'}
                    ],
                    flaw_type: [
                        {required: true, message: '请输入缺陷类型', trigger: 'blur'}
                    ],
                    flaw_class: [
                        {required: true, message: '请输入缺陷级别', trigger: 'blur'}
                    ],
                    intact: [
                        {required: true, message: '请输入完好率', trigger: 'blur'}
                    ],
                    discover_time: [
                        {required: true, message: '请输入发现时间', trigger: 'blur'}
                    ],
                    discover_person: [
                        {required: true, message: '请输入发现人员', trigger: 'blur'}
                    ],
                    flaw_describe: [
                        {required: true, message: '请输入缺陷描述', trigger: 'blur'}
                    ]}
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.axios.get('eliminate.json').then((res) => {
                    this.eliminate = res.data.result
                    this.total = res.data.total
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .task {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .el-row {
        margin-top: 10px;
    }

    .button {
        position: absolute;
        left: 775px;
    }

    .buttonnum {
        position: absolute;
        left: 885px;
    }
</style>
